<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>题库</title>
		<link rel="stylesheet" type="text/css" href="index.css"/>
		<link rel="stylesheet" type="text/css" href="animate.css"/>
	</head>
	<body>
		<div class="web">
			<!--首页-->
			<div class="inWeb">
				<h1 class="title">18班第一季html基础知识对抗赛</h1>
				<!--<div class="group"><img src="img/yl1.png"/></div>-->
				<div class="vs animated bounceInDown"><img src="img/vs.png"/></div>
				<!--<div class="group group2"><img src="img/jy1.png"/></div>-->
				<div class="action"><img src="img/tiaozh.png"/></div>
			</div>
			<!--问题页-->
			<div class="prob">
				<h1 class="title">18班第一季html基础知识对抗赛</h1>
				<div class="problem">
					<!--<h2>5 . 在下列的 HTML 中，哪个可以添加背景颜色？</h2>
					<xmp><body color="yellow"></xmp>
					<xmp><body color="yellow"></xmp>
					<xmp><body color="yellow"></xmp>-->
				</div>
				<div class="answer">
					<input class="btn1" type="button" value="下一题" />
					<input class="btn" type="button" value="上一题" />
					<input class="btnAas" type="button" name="" id="" value="答案" />
					<div class="ans">答案是：<strong class="answ"></strong></div>
					<div>倒计时30秒:<span class="time">30</span></div>
				</div>
			</div>
		</div>
		<script src="jquery-2.1.0.js"></script>
		<script type="text/javascript">
			$(function(){
//				console.log($(".title").width());
				var i=0,result,isGetData = false,timer;
				//获取题目数据
				function getData(){
					$.ajax({
						type:"get",
						url:"data.json",
						async:true,
						success:function(res){
//							console.log(res);
							result = res;
							callBack(res,i);
							isGetData = true;
						}
					});
				}
				getData();
				//渲染题目到页面
				function callBack(res,i){
//					for(var i=0,leng = res.length;i<leng;i++){
						var xl = "<h2 class='animated bounceInLeft wit'><xmp>"+res[i].id+","+res[i].problem+"</xmp></h2>";
						
//						if(xl.width())
						if(res[i].opt){
							for(var t=0;t<res[i].opt.length;t++){
//								console.log(res[i].opt[t]);
								xl += "<xmp class='animated bounceInLeft'>"+res[i].opt[t]+"</xmp>"
							}
							$(".problem").append(xl);
//							console.log($(".wit").width());
						}else{
							$(".problem").append(xl);
						}
//					}
				}
				var num = 30;
				//点击开始答题
				$(".action").on("click",function(){
					$(".inWeb").css("opacity","0");
					$(".prob").css({"opacity":"1","z-index":"1"});
					setTime(num);
				})
				//倒计时30秒
				function setTime(num){
					timer = setInterval(function(){
//						console.log(num);
						num--;
						$(".time").text(num);
						if(num<=0){
							num=30;
							clearInterval(timer);
						}
					},1000)
				}
				//下一题按钮
				$(".btn").on("click",function(){
					$(".answ").text("");
					clearInterval(timer);
					num=30;
					$(".time").text(num);
					i--;
					i= i<=0?0:i;
					if(isGetData){
//						console.log(result.length);
						if(i<result.length){
							$(".problem").html("");
							getData();
						}else{
							alert("题库已爆！")
						}
					}
					setTime(num);
				})
				//上一题按钮
				$(".btn1").on("click",function(){
					$(".answ").text("");
					clearInterval(timer);
					num=10;
					$(".time").text(num);
					i++;
					if(isGetData){
//						console.log(result.length);
						if(i<result.length){
							$(".problem").html("");
							getData();
						}else{
							alert("题库已爆！")
						}
					}
					setTime(num);
				})
				//答案
				$(".btnAas").on("click",function(){
					if(isGetData){
						$(".answ").text(result[i].answer);
					}
				})
				
			})
			
			
		</script>
	</body>
</html>
